<template>
  <div>
    <div class="to-add-item" :class="itemColor" @click="isWordType() ? showAddWordForm = true : showAddGrammarForm = true;">
      <div class="plus-class">+</div>
    </div>
    <add-or-modify-word-dialog :visible.sync="showAddWordForm"></add-or-modify-word-dialog>
    <add-or-modify-grammar-dialog :visible.sync="showAddGrammarForm"></add-or-modify-grammar-dialog>
  </div>
</template>

<script>
import AddOrModifyWordDialog from "@/components/AddOrModifyWordDialog";
import AddOrModifyGrammarDialog from "@/components/AddOrModifyGrammarDialog";
export default {
  name: "ToAddItemDiv",
  components: {
    AddOrModifyWordDialog,
    AddOrModifyGrammarDialog
  },
  props: {
    type: String
  },
  data() {
    return {
      showAddWordForm: false,
      showAddGrammarForm: false
    };
  },
  computed: {
    itemColor() {
      return this.isWordType() ? 'word-color' : 'grammar-color';
    }
  },
  methods: {
    isWordType() {
      return this.type === 'word';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/color.scss";
.to-add-item {
  width: 305.08px;
  height: 101.4px;
  border-radius: 13px;
  border-width: 2px;
  border-style:dashed;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}
.word-color {
  color: $word-div-color;
}
.grammar-color {
  color: $grammar-div-color;
}
.plus-class {
  font-size: 43px;
}
</style>